﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>部装工位看板</title>
  <style>
    .wrapper {
      margin: 5px;
      position: relative;
      padding: 10px;
      border: 3px solid blue;
      width: 4640px;
      height: 1070px;
    }

    .tip {
      margin: 5px;
      position: relative;
      padding: 10px;
      width: 4640px;
      height: 70px;
    }

    .item {
      width: 240px;
      height: 170px;
      border: 1px dashed blue;
      position: absolute;
    }

    .rowOne {
      top: 10px
    }

    .rowTwo {
      top: 190px
    }

    .rowThree {
      top: 370px
    }

    .rowFour {
      top: 550px;
    }

    .rowFive {
      top: 730px;
    }

    .rowSix {
      top: 910px;
    }

    h6 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-weight: bold;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
    }

    h3 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-weight: bold;
      height: 30px;
      font-size: 24px;
      line-height: 170px;
    }

    p {
      text-align: center;
      font-weight: bold;
      height: 5px;
      font-size: 8px;
      line-height: 10px;
    }

    .item-lable {
      font-weight: bold !important;
      color: #409EFF !important;
    }

    .el-descriptions-item__label {
      color: #409EFF !important;
      font-weight: bold !important;
    }

    .el-table .danger-row {
      color: #fff;
      background: #F56C6C;
    }

    .el-table .warning-row {
      color: #fff;
      background: #E6A23C;
    }

    .el-table .success-row {
      color: #fff;
      background: #0fd850;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <ly-board-header title="部装工位看板" style="width: 4670px;"></ly-board-header>
    <!-- <div class="tip">
      <div style="width: 150px;top: 10px;left:4012px;height: 70px;border: 1px dashed blue;position: absolute;">
        <h1 style="line-height: 30px;width: 150px;text-align: center;">平衡间</h1>
      </div>
    </div> -->
    <div class="wrapper">
      <template v-for="item in workstationMapping">
        <workstation-table :class="item.className" :style="item.style" :workstationname="item.name"
          :data-list="item.dataList" :show-detail="showDetail" :zoom="item.zoom">
        </workstation-table>
      </template>

      <div class="item rowOne" style="left:1260px;">
        <h3>存级区</h3>
      </div>

      <div class="item rowOne" style="height: 350px;width: 130px;left:1510px">
        <h3 style="line-height: 350px;">故检区</h3>
      </div>

      <div class="item rowOne" style="height: 350px;width: 740px;left:1650px">
        <h3 style="line-height: 350px;">故检区</h3>
      </div>

      <div class="item rowOne" style="height: 80px;width: 740px;left:2400px">
        <h3 style="line-height: 80px;">存放区，部装借用</h3>
      </div>

      <div class="item" style="height: 80px;width: 740px;left:2400px;top: 100px;">
        <h3 style="line-height: 80px;">存放区，部装借用</h3>
      </div>

      <div class="item" style="width: 740px;left:2400px;height: 80px;top: 190px;">
        <h3 style="line-height: 80px;">排产排放存放区</h3>
      </div>

      <div class="item" style="width: 740px;left:2400px;height: 80px;top: 280px;">
        <h3 style="line-height: 80px;">喷口存放区</h3>
      </div>

      <div class="item rowTwo" style="height: 350px;width: 740px;left:10px">
        <h3 style="line-height: 350px;">库房</h3>
      </div>

      <div class="item rowTwo" style="height: 350px;width: 740px;left:760px">
        <h3 style="line-height: 350px;">库房</h3>
      </div>

      <div class="item rowThree" style="width: 130px;left:1510px">
        <h3>集件配送班</h3>
        <h3>返件区</h3>
      </div>

      <div class="item rowThree" style="width: 740px;left:1650px">
        <h3>加力存放区</h3>
      </div>

      <div class="item rowThree" style="width: 740px;left:2400px">
        <h3>空地</h3>
      </div>

      <div style="width: 150px;top: 470px;left:4012px;height: 70px;border: 1px dashed blue;position: absolute;">
        <h1 style="line-height: 30px;width: 150px;text-align: center;">平衡间</h1>
      </div>

      <div class="item rowFour" style="height: 530px;width: 740px;left:10px;">
        <h3 style="line-height: 530px;">库房</h3>
      </div>

      <div class="item rowFour" style="height: 350px;width: 740px;left:760px">
        <h3 style="line-height: 350px;">集件配送班 大件组</h3>
      </div>

      <div class="item rowSix" style="width: 740px;left:760px">
        <h3>库房</h3>
      </div>

      <div class="item rowFour" style="height: 530px;width: 130px;left:1510px">
        <h3 style="line-height: 530px;">集件配送班</h3>
        <h3 style="line-height: 530px;">小件组</h3>
      </div>

      <div class="item rowFive" style="width: 365px;left:1650px">
        <h3>部装休息岛</h3>
      </div>

      <div class="item rowFive" style="height: 350px;width: 740px;left:2400px">
        <h3 style="line-height: 350px;">故检区</h3>
      </div>

      <div class="item rowSix" style="height: 80px;width: 365px;left:1650px">
        <h3 style="line-height: 80px;">检验桌区域</h3>
      </div>

      <div class="item" style="height: 80px;width: 740px;top:1000px;left:1650px">
        <h3 style="line-height: 80px;">新机附件存放区</h3>
      </div>
    </div>

    <el-dialog :title="detail.title" :width="'98%'" :top="'10px'" :center="true" :visible.sync="detail.dialogVisiable"
      @closed="detail.dialogVisiable = false">
      <el-descriptions title="" border :column="5" style="margin-bottom: 10px;">
        <el-descriptions-item label="发动机号:">
          {{detail.data.machineno}}
        </el-descriptions-item>
        <el-descriptions-item label="任务单号:">
          {{detail.data.containerno}}
        </el-descriptions-item>
        <el-descriptions-item label="任务名称:">
          {{detail.data.description}}
        </el-descriptions-item>
        <el-descriptions-item label="计划开始时间:">
          <span v-if="detail.data.plannedstartdate">
            {{detail.data.plannedstartdate.replace('T',' ')}}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="计划完成时间:">
          <span v-if="detail.data.plannedfinishdate">
            {{detail.data.plannedfinishdate.replace('T',' ')}}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="班:">
          {{detail.data.shiftname}}
        </el-descriptions-item>
        <el-descriptions-item label="组:">
          {{detail.data.teamname}}
        </el-descriptions-item>
        <el-descriptions-item label="领工人:">
          {{detail.data.fullname}}
        </el-descriptions-item>
        <el-descriptions-item label="是否缺件:">
          <el-tag :type="detail.data.isqitao === '否'? 'danger' : 'success'">{{detail.data.isqitao}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否返件:">
          <el-tag :type="detail.data.isdealfault === '是'? 'danger' : 'success'">{{detail.data.isdealfault}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>

  <script type="module">
    import WorkstationTable from '../Scripts/components/WorkstationTable.js'
    import LyBoardHeader from '../Scripts/components/LyBoardHeader.js'
    import { getParams } from '../Scripts/hooks/useCommonMethod.js'
    import { getFactoryInfo } from '../Scripts/hooks/fetchAPI.js'
    const app = new Vue({
      el: '#app',
      components: { WorkstationTable, LyBoardHeader },
      data: {
        queryInfo: { factoryname: '' },
        workstationMapping: [
          {
            index: 0, name: '03-CZ-TYF-1', desc: '03-CZ-TYF-1', dataList: [],
            className: 'item rowOne', style: { 'left': '10px' }
          },
          {
            index: 1, name: '03-ZZ-TYF-1', desc: '03-ZZ-TYF-1', dataList: [],
            className: 'item rowOne', style: { 'left': '260px' }
          },
          {
            index: 2, name: '03-CZ-TYF-2', desc: '03-CZ-TYF-2', dataList: [],
            className: 'item rowOne', style: { 'left': '510px' }
          },
          {
            index: 3, name: '03-ZZ-TYF-2', desc: '03-ZZ-TYF-2', dataList: [],
            className: 'item rowOne', style: { 'left': '760px' }
          },
          {
            index: 4, name: '03-CZZ-WPF', desc: '03-CZZ-WPF', dataList: [],
            className: 'item rowOne', style: { 'left': '1010px' }
          },
          {
            index: 5, name: '02-BZ-YB-WP', desc: '02-BZ-YB-WP', dataList: [],
            className: 'item rowOne', style: { 'width': '365px', 'left': '3150px' }
          },
          {
            index: 6, name: '02-BZ-FJ-W', desc: '02-BZ-FJ-W', dataList: [],
            className: 'item rowOne', style: { 'width': '365px', 'left': '3525px' }
          },
          {
            index: 7, name: '02-BZ-DQ-WP', desc: '02-BZ-DQ-WP', dataList: [],
            className: 'item rowOne', style: { 'width': '365px', 'left': '3900px' }
          },
          {
            index: 8, name: '02-BZ-HJX-WP', desc: '02-BZ-HJX-WP', dataList: [],
            className: 'item rowOne', style: { 'width': '365px', 'left': '4275px' }
          },
          {
            index: 9, name: '02-BZ-FS-1', desc: '02-BZ-FS-1', dataList: [],
            className: 'item rowFour', style: { 'left': '1650px' }
          },
          {
            index: 10, name: '02-BZ-FZ-2', desc: '02-BZ-FZ-2', dataList: [],
            className: 'item rowFour', style: { 'left': '1900px' }
          },
          {
            index: 11, name: '02-BZ-FZ-3', desc: '02-BZ-FZ-3', dataList: [],
            className: 'item rowFour', style: { 'left': '2150px' }
          },
          {
            index: 12, name: '02-BZ-ZCJX-1', desc: '02-BZ-ZCJX-1', dataList: [],
            className: 'item rowFour', style: { 'left': '2400px', 'height': '80px' }, zoom: '30%'
          },
          {
            index: 13, name: '02-BZ-ZCJX-2', desc: '02-BZ-ZCJX-2', dataList: [],
            className: 'item', style: { 'top': '640px', 'height': '80px', 'left': '2400px' }, zoom: '30%'
          },
          {
            index: 14, name: '02-BZ-ZYCD-1', desc: '02-BZ-ZYCD-1', dataList: [],
            className: 'item rowFour', style: { 'left': '2650px', 'height': '80px' }, zoom: '30%'
          },
          {
            index: 15, name: '02-BZ-ZYCD-2', desc: '02-BZ-ZYCD-2', dataList: [],
            className: 'item', style: { 'top': '640px', 'left': '2650px', 'height': '80px' }, zoom: '30%'
          },
          {
            index: 16, name: '02-BZ-RSS', desc: '02-BZ-RSS', dataList: [],
            className: 'item rowFour', style: { 'left': '2900px' }
          },
          {
            index: 17, name: '02-BZ-PH-LXTFQ', desc: '02-BZ-PH-LXTFQ', dataList: [],
            className: 'item rowFour', style: { 'width': '365px', 'left': '3525px' }
          },
          {
            index: 18, name: '02-BZ-PH-GW', desc: '02-BZ-PH-GW', dataList: [],
            className: 'item rowFour', style: { 'width': '365px', 'left': '3900px' }
          },
          {
            index: 19, name: '02-BZ-PH-ZHPH', desc: '02-BZ-PH-ZHPH', dataList: [],
            className: 'item rowFour', style: { 'width': '365px', 'left': '4275px' }
          },
          {
            index: 20, name: '02-BZ-YB-WS-1', desc: '02-BZ-YB-WS-1', dataList: [],
            className: 'item rowFive', style: { 'height': '80px', 'width': '365px', 'left': '2025px' }, zoom: '30%'
          },
          {
            index: 21, name: '02-BZ-YB-WS-2', desc: '02-BZ-YB-WS-2', dataList: [], className: 'item',
            style: { 'height': '80px', 'top': '820px', 'width': '365px', 'left': '2025px' }, zoom: '30%'
          },
          {
            index: 22, name: '02-BZ-PH-GY', desc: '02-BZ-PH-GY', dataList: [],
            className: 'item rowFive', style: { 'width': '365px', 'left': '3525px' }
          },
          {
            index: 23, name: '02-BZ-PH-FS', desc: '02-BZ-PH-FS', dataList: [],
            className: 'item rowFive', style: { 'width': '365px', 'left': '3900px' }
          },
          {
            index: 24, name: '02-BZ-PH-DW', desc: '02-BZ-PH-DW', dataList: [],
            className: 'item rowFive', style: { 'width': '365px', 'left': '4275px' }
          },
          {
            index: 25, name: '02-BZ-FJ-WS-1', desc: '02-BZ-FJ-WS-1', dataList: [],
            className: 'item rowSix', style: { 'height': '80px', 'width': '177px', 'left': '2025px' }, zoom: '30%'
          },
          {
            index: 26, name: '02-BZ-FJ-WS-2', desc: '02-BZ-FJ-WS-2', dataList: [],
            className: 'item rowSix', style: { 'height': '80px', 'width': '177px', 'left': '2212px' }, zoom: '30%'
          }
        ],
        detail: {
          dialogVisiable: false, title: '',
          queryInfo: { containerno: '', workstationname: '' },
          data: {}
        }
      },
      methods: {
        async getData() {
          const loading = this.$loading({ lock: true, text: '数据加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
          const { data: { data, meta, total } } = await axios({
            method: "POST",
            url: "../handler/board/ZSWorkZoneLayoutDashBoard.ashx?action=getData",
            data: { type: 'getData', ...this.queryInfo }
          });
          loading.close();
          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }

          for (const i of this.workstationMapping) {
            for (const d of data) {
              let { machineno, description, containerno, finishstatus } = d;
              if (d.workstationname === i.name) {
                i.dataList.push({ machineno, description, containerno, workstationname: i.name, finishstatus });
              }
            }
          }
        },
        async showDetail(row) {
          const loading = this.$loading({ lock: true, text: '数据加载中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
          const { machineno, description, workstationname, containerno } = row;
          this.detail.title = `工位:【${workstationname}】任务:【${description}】详细信息`;
          const { data: { data, meta, total } } = await axios({
            method: "POST",
            url: "../handler/board/ZSWorkZoneLayoutDashBoard.ashx?action=getDetail",
            data: { type: 'getDetail', workstationname, containerno }
          });
          loading.close();
          this.detail.dialogVisiable = true;
          this.detail.data = { ...data[0] };
        }
      },
      async mounted() {
        const factoryInfo = await getFactoryInfo({ factoryid: Decrypt(getParams('factoryid')), isMapping: '是' });
        const { factoryid, factoryname } = factoryInfo[0];
        this.queryInfo.factoryname = factoryname;
        this.getData();
      }
    });
  </script>
</body>

</html>